<template>
  <div id="fund">
    <div class="input-fund">
      基金代码：<el-input class="input-fund-input" v-model="inputFund"></el-input>
      <el-button class="input-fund-button" type="primary" @click="handleAdd(inputFund)">添加</el-button>
      <span>查询的基金代码会存储在localStorage中以便于刷新后查看</span>
      <!-- <el-button class="input-fund-button" type="primary" @click="refreshJZGS">刷新净值估算</el-button> -->
    </div>
    <div class="chart-title">
      <div class="chart-title-box" :style="{ left: -chartBoxScrollLeft + 'px' }">
        <div class="chart-title-item" v-for="(item, index) in FundData" :key="index">
          {{ index }}:{{ item.base.fS_name }}
          <div class="chart-close" @click="removeFund(index)"><i class="el-icon-close"></i></div>
        </div>
      </div>
    </div>
    <div class="chart-box" @scroll="scrollChange">
      <div class="chart-item" v-for="(item, index) in FundData" :key="index">
        <div class="chart-item-box" v-if="item.base.jzgs">
          <div class="chart-item-subtitle">
            <span
              v-if="item.base.jzgs"
              :style="{ color: [item.base.jzgs[item.base.jzgs.length - 1].percentage >= 0 ? '#F56C6C' : '#67C23A'] }"
            >
              {{
                "估算涨幅 : " +
                item.base.jzgs[item.base.jzgs.length - 1].percentage +
                "%   净值估算" +
                item.base.jzgs[item.base.jzgs.length - 1].nav
              }}</span
            >
          </div>
          <div :ref="'chart-jzgs-' + index" class="chart-item-chart chart-item-jzgs"></div>
        </div>
        <div class="chart-item-box">
          <div class="chart-item-subtitle">
            <span v-for="(data, index) in item.base.Data_grandTotal" :key="index">
              {{ data.name + " : " + data.data[data.data.length - 1][1] + "%" }}
            </span>
          </div>
          <div :ref="'chart-dgt-' + index" class="chart-item-chart chart-item-dgt"></div>
        </div>

        <div class="chart-item-box">
          <div class="chart-item-subtitle" v-if="item.base.Data_ACWorthTrend">
            <span>{{ "单位净值 : " + item.base.Data_ACWorthTrend[item.base.Data_ACWorthTrend.length - 1][1] }}</span>
          </div>
          <div :ref="'chart-acwt-' + index" class="chart-item-chart chart-item-acwt"></div>
        </div>
        <div class="chart-item-box" v-if="item.base.Data_fundSharesPositions.length > 0">
          <div class="chart-item-subtitle">
            <span>
              {{
                "股票仓位 : " +
                item.base.Data_fundSharesPositions[item.base.Data_fundSharesPositions.length - 1][1] +
                "%"
              }}</span
            >
          </div>
          <div :ref="'chart-sp-' + index" class="chart-item-chart chart-item-sp"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getFundInfo, getTestFundInfo, getFundjzgs } from "../../api/finance/fund";
import { getEvalVariable } from "../../utils/functions/code";
import { Format } from "../../utils/functions/date";
import * as echarts from "echarts";
import { mapState } from "vuex";
import { getSPOption, getACWTOption, getDGTOption, getJZGZOption } from "../../utils/chartOption/fund";
import { shallowRef, triggerRef } from "vue";
export default {
  setup() {
    const FundData = shallowRef({});
    function changeData(setlocal = false) {
      triggerRef(FundData);
    }
    return { FundData, changeData };
  },
  data() {
    return {
      code: "161725",
      chart: undefined,
      inputFund: 161725,
      testData: undefined,
      chartBoxScrollLeft: 0,
    };
  },
  computed: {
    ...mapState({
      windowWidth: "windowWidth",
    }),
  },
  methods: {
    handleAdd(code) {
      var fundList = JSON.parse(localStorage.getItem("fundList"));
      if (!fundList) {
        fundList = [];
      }
      if (fundList.indexOf(code) < 0) {
        fundList.push(code);
        localStorage.setItem("fundList", JSON.stringify(fundList));
      }
      this.addFund(code);
    },
    addFund(code) {
      if (!this.FundData[code]) {
        getFundInfo(code).then((response) => {
          this.FundData[code] = { base: getEvalVariable(response.data) };
          this.changeData();
          this.$nextTick(() => {
            this.FundData[code].chart = {
              acwt: echarts.init(this.$refs["chart-acwt-" + code]),
              dgt: echarts.init(this.$refs["chart-dgt-" + code]),
            };
            if (this.FundData[code].base.Data_fundSharesPositions.length > 0) {
              this.FundData[code].chart.sp = echarts.init(this.$refs["chart-sp-" + code]);
              this.FundData[code].chart.sp.setOption(getSPOption(this.FundData[code].base.Data_fundSharesPositions));
            }

            this.FundData[code].chart.acwt.setOption(getACWTOption(this.FundData[code].base.Data_ACWorthTrend));
            this.FundData[code].chart.dgt.setOption(getDGTOption(this.FundData[code].base.Data_grandTotal));
            getFundjzgs(code).then((jzgs) => {
              if (jzgs.data.data.items.length > 0) {
                this.FundData[code].base.jzgs = jzgs.data.data.items;
                this.changeData();
                this.$nextTick(() => {
                  this.FundData[code].chart.jzgs = echarts.init(this.$refs["chart-jzgs-" + code]);

                  this.FundData[code].chart.jzgs.setOption(getJZGZOption(jzgs.data.data.items));
                });
              }
            });
          });
        });
      }
    },
    scrollChange(e) {
      this.chartBoxScrollLeft = e.target.scrollLeft;
    },
    refreshJZGS() {
      for (const key in this.FundData) {
        const element = this.FundData[key];
        getFundjzgs(key).then((jzgs) => {
          this.FundData[key].base.jzgs = jzgs.data.data.items;
          this.changeData();
          this.FundData[key].chart.jzgs.setOption(getJZGZOption(jzgs.data.data.items));
        });
      }
    },
    removeFund(code) {
      delete this.FundData[code];
      this.changeData();
      const fundList = [];
      for (const key in this.FundData) {
        fundList.push(key);
      }
      localStorage.setItem("fundList", JSON.stringify(fundList));
    },
    CanTrade(date) {
      const nowDate = Format("YYYY-mm-dd", date);
      if (
        (date >= new Date(nowDate + " 9:30:00") && date <= new Date(nowDate + " 11:31:00")) ||
        (date >= new Date(nowDate + " 13:00:00") && date <= new Date(nowDate + " 15:01:00"))
      ) {
        return true;
      } else {
        return false;
      }
    },
  },
  watch: {
    windowWidth() {},
  },
  mounted() {
    setInterval(() => {
      if (this.CanTrade(new Date())) {
        this.refreshJZGS();
      }
    }, 60000);
    this.$nextTick(() => {
      var fundList = JSON.parse(localStorage.getItem("fundList"));
      if (fundList) {
        for (let i = 0; i < fundList.length; i++) {
          this.addFund(fundList[i]);
        }
      }
    });
  },
};
</script>
<style scoped>
#fund {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.input-fund {
  width: 100%;
  height: 50px;
  padding: 5px;
}
.input-fund-input {
  width: 200px;
}
/* .input-fund-button {
  width: 100px;
} */

.chart-title {
  height: 30px;
}
.chart-title-box {
  position: absolute;
  white-space: nowrap;
}
.chart-title-item {
  width: 500px;
  height: 30px;
  text-align: center;
  display: inline-block;
  font-size: 18px;
  color: #409eff;
}
.chart-close {
  display: inline-block;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 50%;
  color: black;
}
.chart-close:hover {
  background: #e2e2e2;
}
.chart-box {
  flex: 1;
  overflow: auto;
  white-space: nowrap;
}
.chart-item {
  width: 500px;
  height: 2000px;
  display: inline-block;
}
.chart-item-chart {
  width: 100%;
  height: 400px;
}
.chart-item-box {
  position: relative;
}
.chart-item-subtitle {
  position: absolute;
  top: 30px;
  left: 10px;
  color: #409eff;
  z-index: 1;
}
.chart-item-subtitle span {
  padding: 0 10px;
}
.chart-item-subtitle span:nth-child(100n + 2) {
  color: #67c23a;
}
.chart-item-subtitle span:nth-child(100n + 3) {
  color: #f56c6c;
}
</style>
